<template>
    <!-- 
      v-if 指令：
      - 基于表达式的值（flag）的真假来条件性地渲染元素
      - 当条件为false时，元素会被从DOM中移除（完全销毁）
      - 适合在条件不常变化的场景使用
    -->
    <p v-if="flag">
        通过v-if控制的元素
    </p>

    <!-- 
      v-show 指令：
      - 同样基于表达式的值（flag）控制元素显示状态
      - 当条件为false时，元素不会被移除，而是通过CSS的display: none隐藏
      - 元素始终存在于DOM中，只是视觉上不可见
      - 适合在条件需要频繁切换的场景使用
    -->
    <p v-show="flag">
        通过v-show控制的元素
    </p>

    <!-- 
      点击按钮时切换flag的值（true/false交替）
      @click是Vue的事件绑定语法，等同于v-on:click
      这里直接在模板中使用表达式切换flag的布尔值
    -->
    <button @click="flag = !flag">切换</button>
</template>

<script setup>
// 导入Vue的ref函数，用于创建响应式变量
import { ref } from 'vue'

// 创建一个响应式布尔变量flag，初始值为true
// 用于控制v-if和v-show的条件渲染
const flag = ref(true)

/* 
  v-if与v-show的核心区别总结：
  1. 渲染方式：v-if是动态添加/移除DOM元素，v-show是通过CSS控制显示/隐藏
  2. 性能消耗：v-if切换时有更高的切换开销（DOM操作），v-show有更高的初始渲染开销
  3. 使用场景：v-if适合不常切换的条件，v-show适合需要频繁切换的条件
  4. 编译过程：v-if会触发组件的生命周期钩子，v-show不会（元素始终存在）
*/
</script>
    